<template>
	<div id="home">
		<vant-swipe :list="advertising"></vant-swipe>
		<top-com @showOverlay="showOverlay"></top-com>
		<top-filter 
		v-on:choose-as="chooseAs" 
		:default-as="listShow" 
		:as-list="list" 
		@showOverlay="showOverlay"
		@hideOverlay="hideOverlay"
		:overlayShowHome="overlayShow"
		></top-filter>
		<as-list 
		:show="listShow.type" 
		:as-list="list"
		:height="listHei" 
		@showOverlay="showOverlay"
		@hideOverlay="hideOverlay"
		:overlayShowHome="overlayShow"></as-list>
		<menu-list-home @showOverlay="showOverlay"></menu-list-home>
        <van-overlay :show="overlayShow" @click="hideOverlayShow" @showOverlay="showOverlay" duration="0" />
	</div>
</template>

<script>
import Vue from "vue"

// UI组件
import { Swipe, SwipeItem, Overlay } from "vant"

// 自定义组件
import VantSwipe from "_components/project/Home/VantSwipe"
import TopCom from "_components/project/Home/Top"
import MenuListHome from "_components/project/common/MenuListHome"
import TopFilter from "_components/project/Home/TopFilter"
import AsList from "_components/project/Home/AsList"

// 通用方法
import { getAds } from "_network/request" // 获取广告
import { checkDataEqualVal } from "_commonFn/check"
import { defaultShare } from "_commonFn/share"

Vue.use(Swipe).use(SwipeItem).use(Overlay)

export default {
	name: "Home",
	data() {
		return {
			advertising: [],
			listShow: {
				name: '我的群',
				type: 'association-my'
			},
			overlayShow: false,
			list: [ // 所群类型列表
				{
					name: '我的群',
					type: 'association-my',
				},
				{
					name: '区域群',
					type: 'association-area',

				},
				{
					name: '行业群',
					type: 'association-trade',
				},
				{
					name: '产品群',
					type: 'association-product',
				},
				{
					name: '展会群',
					type: 'association-exhibition',
					firstShow: false,
				},
				{
					name: '企业群',
					type: 'association-company',
				},
				{
					name: '群主讲',
					type: 'workshop',
				}
			]
		}
	},
	methods: {
		getAdvertisingList() {
			getAds()
			.then(res => {
				console.log("获取顶部轮播信息 res", res)
				if (res.errcode == 1100) {
					this.advertising = res.data
				}
			})
			.catch(res => {
				console.log("获取顶部轮播信息 res", res)
			})
		},
		// 点击选择社群
		chooseAs({name, type, isAs = true}) {
			if (isAs && name) this.listShow.name = name
			this.listShow.type = type
		},
		// 隐藏遮罩层
		hideOverlayShow() {
			this.overlayShow = !process.env.CLOSE_ON_CLICK_OVERLAY
		},
		showOverlay() {
			this.overlayShow = true
		},
		hideOverlay() {
			this.overlayShow = !process.env.CLOSE_ON_CLICK_OVERLAY
		}
	},
	mounted() {
		this.getAdvertisingList() // 获取广告
	},
	computed: {
		listHei() {
			const bodyHei = window.innerHeight || document.documentElement.clientHeight
			// console.log('height', bodyHei - 150)
			return bodyHei - 150
		}
	},
	activated() {
		// console.log('activated')
		// console.log('this.$store.state.wechat', this.$store.state.wechat)
		if (this.$store.getters.isWechatBro) {
			checkDataEqualVal({
				data: this.$store.getters,
				key: 'getWechatStatus',
				val: ['success', 'fail'],
				callback: function(val) {
					if (val === 'success') defaultShare({})
				}
			})
		}
	},
	components: {
		VantSwipe,
		TopCom,
		MenuListHome,
		TopFilter,
		AsList,
	}
};
</script>

<style lang="scss" scoped>
</style>